<template>
  <div class="filter-search">
    <div class="input-container">
      <el-input
        v-model="searchKeyword"
        :maxlength="maxlength"
        :placeholder="placeholder"
        style="font-size: 14px;"
        clearable
        @clear="search"
        @keyup.native="handleChange($event, searchKeyword)">
        <i slot="prefix" class="el-input__icon el-icon-search" style="line-height:38px;" />
      </el-input>
    </div>
    <el-button class="search-btn-style" type="primary" size="small" @click="search">查询</el-button>
  </div>
</template>
<script>
export default {
  name: 'FilterSearch',
  props: {
    label: {
      type: String,
      default: 'keyword'
    },
    maxlength: {
      type: Number,
      default: 20
    },
    placeholder: {
      type: String,
      default: '请输入GIF关键词'
    }
  },
  data() {
    return {
      searchKeyword: ''
    };
  },

  methods: {
    formatData(val) {
      const obj = {
        [this.label]: val
      };
      return obj;
    },
    handleChange(event, val) {
      if (event.code === 'Enter' || event.code === 'enter') {
        this.$emit('postMessage', this.formatData(val));
      }
    },
    search() {
      this.$emit('postMessage', this.formatData(this.searchKeyword));
    }
  }
};
</script>
<style lang="scss" scoped>
.filter-search {
  height:32px;
  display: flex;
  .input-container {
    display: flex;
  }
  .search-btn-style {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: none;
  }
  & ::v-deep {
    .el-input {
      width: 240px;
    }
    .el-input__inner {
      background-color: #fff;
      height: 100%;
      width: 240px;
      border-radius:4px 0 0 4px;
      border:1px solid rgba(221,221,221,1);
    }
    .el-input__prefix, .el-input__suffix {
      top: -2px;
    }
  }
}
</style>

